<template>
  <section class="task-wrapper">
    <p v-if="loginStatus === 4"
       class="gray-text">您尚未登录，请尽快登录~</p>
    <div class="txt-center"
         v-else>
      <p class="gray-text">活动期间用户月累计采购额，每达到一定额度立返现金红包</p>
      <div class="task-staus-box" v-if="myAccount - 0 < 50000">
        还差 <span class="red-txt"> ¥{{(tasklist[grade]['money'] - myAccount) | floatPrices}} </span> 可得 <span class="red-txt"> ¥{{tasklist[grade]['discount']}} </span>现金红包
      </div>
    </div>
    <!-- 进度条 -->
    <div class="task-progress-box">
      <div class="task-cursor-box"
           :class="{'arrow-after': purchaseAfter}"
           v-bind:style="purchasePos">
        您的采购额：<em class="tag-icon">¥</em><span class="my-amount">{{myAccount | floatPrices}}</span>
      </div>
      <div class="task-progress-tag ">
        <div class="dot"
             v-for="(task, index) in tasklist"
             :key="index">
          <span class="task-erection">|</span>
          <p class="task-money">满 ¥ {{task.money}}</p>
          <span :class="{'task-award': true, 'task-award-gray': (grade !== 3 ? grade >= index : true) || myAccount === 50000}">
            <template v-if="(grade !== 3 ? grade > index : true) || myAccount === 50000">
            已
            </template>
            直降{{task.discount}} 个点</span>
        </div>
      </div>
      <div class="task-progress-bar">
        <div :class="{'task-progress-fill': barWidth - 0 > 0, 'task-progress-before': barWidth === '100'}" :style="{width: barWidth + '%'}"></div>
      </div>
    </div>
    <router-link :to="{name: 'JanuaryYourenField'}" class="btn-yellow">优刃</router-link>
  </section>
</template>

<script>
export default {
  name: 'ActivityTask',
  computed: {
    loginStatus () {
      return this.$store.getters.loginStatus
    },
    barWidth () {
      let para = 0
      // 个人金额为0
      if (!this.myAccount) {
        this.grade = 0
        return '0'
      } else if (this.myAccount === 1000) {
        this.grade = 1
        return '29.5'
      } else if (this.myAccount === 10000) {
        this.grade = 2
        return '60'
      } else if (this.myAccount >= 50000) {
        this.grade = 3
        para = 3
        return '100'
      }
      let len = this.tasklist.length
      for (let i = 0; i < len; i++) {
        let item = this.tasklist[i]
        if (this.myAccount < item.money) {
          this.grade = i - 1
          para = i - 1
          break
        }
      }
      let prev
      let next
      para === 0 ? prev = 0 : prev = this.tasklist[para - 1]['money']
      para === 3 ? next = 50000 : next = this.tasklist[para + 1]['money']
      console.log(prev, next)
      let percent = (this.myAccount - prev) / (next - prev)
      console.log(para, percent)
      return `${30 * (para + percent)}`
    },
    getNum () {
      switch (this.grade) {
        case 0 : return 0
        case 1 : return 150
        case 2 : return 489
        case 3 : return 888
        default: return 0
      }
    },
    purchasePos () {
      if (this.barWidth - 0 > 80) {
        this.purchaseAfter = true
        return { right: `${98 - this.barWidth}%` }
      } else {
        this.purchaseAfter = false
        return { left: `${this.barWidth}%` }
      }
    }
  },
  data () {
    return {
      grade: 0,
      purchaseAfter: false,
      tasklist: [{ id: 1, money: 0, discount: 2 }, { id: 2, money: 1000, discount: 3 }, { id: 3, money: 10000, discount: 4 }, { id: 4, money: 50000, discount: 5 }]
    }
  },
  props: {
    myAccount: {
      type: Number,
      default: () => 0
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.task-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  background: #fff;
  padding: 50px 0 80px;
  .gray-text {
    text-align: center;
    @include fontbase(#999999, 14px, 20px);
  }
  .task-staus-box {
    text-align: center;
    display: inline-block;
    margin-top: 10px;
    border: #ff0000 2px dashed;
    padding: 15px 85px;
    @include fontbase(#333333, 18px, 25px);
  }
  .red-txt {
    @include fontbase(#ff0000, 20px, 25px);
  }
}
.task-progress-box {
  position: relative;
  width: 100%;
  margin-top: 99px;
  height: 162px;
  .task-progress-tag {
    padding-top: 85px;
    .dot {
      position: absolute;
      display: inline-block;
      text-align: center;
      margin-left: -90px;
      width: 185px;
      &:nth-child(1) {
        left: 0.5%;
      }
      &:nth-child(2) {
        left: 29.5%;
      }
      &:nth-child(3) {
        left: 60%;
      }
      &:nth-child(4) {
        left: 90%;
      }
      .task-erection {
        height: 11px;
        overflow: hidden;
        display: inline-block;
        color: #787878;
      }
    }
    .task-money {
      margin-top: 3px;
      @include fontbase(#333333, 16px, 22px);
    }
    .task-award {
      display: inline-block;
      margin-top: 6px;
      border-radius: 15px;
      padding: 5px 20px;
      color: #ffffff;
      font-size: 14px;
      line-height: 20px;
      background: #ca0202;
      &.task-award-gray {
        background: #b9b9b9;
      }
    }
  }
  .task-progress-bar {
    position: absolute;
    box-sizing: border-box;
    top: 50px;
    width: 100%;
    overflow: hidden;
    height: 30px;
    background: linear-gradient(
      180deg,
      rgba(255, 158, 158, 1) 0%,
      rgba(255, 230, 230, 1) 100%
    );
    border: 1px solid #e18888;
    border-radius: 15px;
  }
  .task-progress-fill {
    position: absolute;
    transform: skew(-40deg);
    width: 0;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(231, 56, 55, 1) 0%,
      rgba(169, 0, 0, 1) 100%
    );
    border-radius: 15px 0px 0px 15px;
    &:before {
      position: absolute;
      width: 40px;
      content: "";
      height: 30px;
      left: -20px;
      top: 0;
      background: linear-gradient(180deg, #e73837 0%, #a90000 100%);
    }
  }
  .task-progress-before {
    &:after {
      position: absolute;
      width: 40px;
      content: "";
      height: 30px;
      right: -20px;
      top: 0;
      background: linear-gradient(180deg, #e73837 0%, #a90000 100%);
    }
  }
  .tag-icon {
    font-size: 12px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
  }
  .task-cursor-box {
    position: absolute;
    display: inline-block;
    color: white;
    font-size: 14px;
    line-height: 22px;
    border-radius: 3px;
    padding: 6px 20px 6px 5px;
    box-sizing: border-box;
    z-index: 5;
    min-width: 205px;
    text-align: center;
    &:before {
      position: absolute;
      display: inline-block;
      height: 100%;
      width: 100%;
      z-index: 3;
      bottom: 0;
      left: -12px;
      content: "";
      background: #cf2222;
      border-radius: 3px;
      text-align: left;
      transform: skew(-20deg);
      z-index: -1;
    }
    &:after {
      position: absolute;
      bottom: -12px;
      left: 10px;
      content: "";
      border: 5px solid transparent;
      border-top: 7px solid #cf2222;
      height: 0;
      width: 0;
    }
    .my-amount {
      font-size: 20px;
      vertical-align: middle;
    }
  }
  .arrow-after {
    &:after {
      left: 170px;
    }
  }
}
.btn-yellow{
  margin-top: 50px;
    border: 1px solid #f0f0f0;
    padding: 10px 15px;
    display: inline-block;
    background: #ffcc00;
}
</style>
